<!--页面主要内容-->
<main class="lyear-layout-content">
    <div class="container-fluid p-t-15">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb" style="padding: 1.25rem 1rem;background-color: white;">
                        <li class="breadcrumb-item" aria-current="page">管理员列表</li>
                    </ol>
                </nav>
                <!-- </div> -->
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-toolbar d-flex flex-column flex-md-row">
                        <div class="toolbar-btn-action">
                            <a class="btn btn-primary m-r-5" href="{:url('admin/admin/add')}"><i
                                    class="mdi mdi-plus"></i> 新增</a>
                            <a class="btn btn-success m-r-5 start" href="javascript:;"><i class="mdi mdi-check"></i>
                                启用</a>
                            <a class="btn btn-warning m-r-5 stop" href="javascript:;"><i
                                    class="mdi mdi-block-helper"></i> 禁用</a>
                            <a class="btn btn-danger dels" href="javascript:;"><i class="mdi mdi-window-close"></i>
                                删除</a>
                        </div>

                        <form class="search-bar ml-md-auto form-inline" method="post" action="" role="form"
                            id="search_form">
                            <!-- <div class="form-group">
                                <input type="text" class="form-control mb-2 mr-sm-2" id="adminid" name="id"
                                    placeholder="可输入ID号">
                            </div> -->

                            <div class="form-group">
                                <input type="text" class="form-control mb-2 mr-sm-2" id="nickname" name="nickname"
                                    placeholder="可输入昵称">
                            </div>

                            <div class="form-group">
                                <select class="form-control mb-2 mr-sm-2" name="state" id="state">
                                    <option value="">请选择状态</option>
                                    <option value="1">正常</option>
                                    <option value="0">禁用</option>
                                </select>
                            </div>

                            <button type="submit" class="btn btn-primary mb-2">提交</button>
                        </form>
                        <button type="click" class="btn btn-info mb-2" style="margin-left: 10px;" onclick="location.reload()">重置</button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="check-all" />
                                                <label class="custom-control-label" for="check-all"></label>
                                            </div>
                                        </th>
                                        <th>编号</th>
                                        <th>用户名</th>
                                        <th>昵称</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="tb">
                                    {foreach $adminList as $item}
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input ids" name="ids[]"
                                                    value="{$item.id}" id="ids-{$item.id}" />
                                                <label class="custom-control-label" for="ids-{$item.id}"></label>
                                            </div>
                                        </td>
                                        <td>{$item.id}</td>
                                        <td>{$item.username}</td>
                                        <td>{$item.nickname}</td>
                                        <td style="font-size: 18px">
                                            <span
                                                class="badge {$item.state == 1 ? 'badge-success' : 'badge-warning'}">{$item.state_text}</span>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <a class="btn btn-xs btn-default"
                                                    href="{:url('admin/admin/edit',['id' => $item['id']])}"
                                                    data-toggle="tooltip" data-original-title="编辑"><i
                                                        class="mdi mdi-pencil"></i></a>
                                                <a class='btn btn-xs btn-default del' data-original-title='删除'
                                                    href='javascript:;' data-toggle='tooltip' data-id='{$item.id}'
                                                    data-action="del"><i class='mdi mdi-window-close'></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    {/foreach}
                                </tbody>
                            </table>
                        </div>

                        <div style="text-align: center">{$adminList->render()}</div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</main>
<!--End 页面主要内容-->

<script>
    // 获取的id
    function GetId() {
        // 存放id的数组
        let list = []

        $('input[name="ids[]"]:checked').each(function () {
            // console.log(item);
            list.push($(this).val())
        })

        return list
    }

    let idArr = [];


    // document.querySelector("#tb").addEventListener('click', function () {
    //     console.log('被点击了');
    //     console.log(event);
    //     console.log(event.target.data('action'));
    //     // if (event.target) {

    //     // }
    // }, false);

    $("#tb").delegate("a", "click", function (e) {
        // console.log('被点击了');
        // console.log($(e.target)[0].classList);
        console.log($(e.target)[0].classList);
        // console.log(e.target.dataset);
        let str = $(e.target)[0].classList.value;
        // console.log(typeof str);
        if (str.indexOf('mdi-window-close') !== -1) {
            // console.log('删除');
            // return false;
            // $(".del").on("click", function () {
            let adminid = $(this).data("id");
            // console.log(adminid);
            // return false;
            $.confirm({
                title: "提示",
                escapeKey: true,
                content: "是否删除此数据",
                backgroundDismiss: true,
                theme: 'modern',
                type: 'red',
                icon: 'mdi mdi-alert-outline mdi-36px',
                buttons: {
                    okay: {
                        text: "确认",
                        keys: ["enter"],
                        btnClass: 'btn-info',
                        action: function () {
                            $.ajax({
                                type: "post",
                                url: `{:url('admin/admin/delete')}`,
                                data: {
                                    action: 'del',
                                    adminid,
                                },
                                dataType: "json",
                                success: function (res) {
                                    if (res.code === 1) {
                                        $.notify({
                                            icon: 'mdi mdi-check',
                                            message: res.msg,
                                        }, {
                                            type: "success",
                                        });
                                        setTimeout(() => {
                                            location.reload();
                                        }, 1500);
                                    } else {
                                        $.notify({
                                            icon: 'mdi mdi-window-close',
                                            message: res.msg,
                                        }, {
                                            type: "danger",
                                        });
                                    }
                                },
                            });
                        },
                    },
                    cancel: {
                        text: "取消",
                        keys: ["ctrl", "shift"],
                        btnClass: 'btn-danger'
                    },
                },
            });
            // });
        }
    })

    $("#search_form").on('submit', function (e) {
        e.preventDefault();
        let formData = $(this).serialize();

        $.ajax({
            type: "post",
            url: `{:url('admin/admin/index')}`,
            data: formData,
            dataType: "json",
            success: function (res) {
                if (res.code === 1) {
                    $.notify({
                        icon: 'mdi mdi-check',
                        message: res.msg,
                    }, {
                        type: "success",
                    });
                    // let content = res.data;
                    // console.log(content);
                    // $.alert({
                    //     title: '搜索结果',
                    //     content: "",
                    //     backgroundDismiss: true,
                    //     onContentReady: function () {
                    //         var self = this;
                    //         this.setContentPrepend(res.data.data);
                    //         console.log(res);

                    //     },
                    //     columnClass: 'medium',
                    // });

                    $("#tb").html(res.data);
                } else {
                    $.notify({
                        icon: 'mdi mdi-window-close',
                        message: res.msg,
                    }, {
                        type: "danger",
                    });
                }
            },
        });
    });

    // $(".del").on("click", function () {
    //     let adminid = $(this).data("id");
    //     // console.log(adminid);
    //     // return false;
    //     $.confirm({
    //         title: "提示",
    //         escapeKey: true,
    //         content: "是否删除此数据",
    //         backgroundDismiss: true,
    //         theme: 'modern',
    //         type: 'red',
    //         icon: 'mdi mdi-alert-outline mdi-36px',
    //         buttons: {
    //             okay: {
    //                 text: "确认",
    //                 keys: ["enter"],
    //                 btnClass: 'btn-info',
    //                 action: function () {
    //                     $.ajax({
    //                         type: "post",
    //                         url: `{:url('admin/admin/delete')}`,
    //                         data: {
    //                             action: 'del',
    //                             adminid,
    //                         },
    //                         dataType: "json",
    //                         success: function (res) {
    //                             if (res.code === 1) {
    //                                 $.notify({
    //                                     icon: 'mdi mdi-check',
    //                                     message: res.msg,
    //                                 }, {
    //                                     type: "success",
    //                                 });
    //                                 setTimeout(() => {
    //                                     location.reload();
    //                                 }, 1500);
    //                             } else {
    //                                 $.notify({
    //                                     icon: 'mdi mdi-window-close',
    //                                     message: res.msg,
    //                                 }, {
    //                                     type: "danger",
    //                                 });
    //                             }
    //                         },
    //                     });
    //                 },
    //             },
    //             cancel: {
    //                 text: "取消",
    //                 keys: ["ctrl", "shift"],
    //                 btnClass: 'btn-danger'
    //             },
    //         },
    //     });
    // });

    $('.stop').on('click', function () {
        idArr = GetId();
        if (idArr.length === 0) {
            $.notify({
                icon: 'mdi mdi-alert',
                message: '请选择您想要操作的数据',
            }, {
                type: "info",
            });
            return false;
        }

        $.confirm({
            title: "提示",
            escapeKey: true,
            content: "是否禁用选中管理员",
            backgroundDismiss: true,
            theme: 'modern',
            type: 'orange',
            icon: 'mdi mdi-help-circle-outline mdi-36px',
            buttons: {
                okay: {
                    text: "确认",
                    keys: ["enter"],
                    btnClass: 'btn-info',
                    action: function () {
                        $.ajax({
                            type: "post",
                            url: `{:url('admin/admin/editstates')}`,
                            data: {
                                action: 'stop',
                                idArr,
                            },
                            dataType: "json",
                            success: function (res) {
                                if (res.code === 1) {
                                    $.notify({
                                        icon: 'mdi mdi-check',
                                        message: res.msg,
                                    }, {
                                        type: "success",
                                    });
                                    setTimeout(() => {
                                        location.reload();
                                    }, 1500);
                                } else {
                                    $.notify({
                                        icon: 'mdi mdi-window-close',
                                        message: res.msg,
                                    }, {
                                        type: "danger",
                                    });
                                }
                            },
                        });
                    },
                },
                cancel: {
                    text: "取消",
                    keys: ["ctrl", "shift"],
                    btnClass: 'btn-danger',
                },
            },
        });
    });

    $('.start').on('click', function () {
        idArr = GetId();

        if (idArr.length === 0) {
            $.notify({
                icon: 'mdi mdi-alert',
                message: '请选择您想要操作的数据',
            }, {
                type: "info",
            });
            return false;
        }

        $.confirm({
            title: "提示",
            escapeKey: true,
            content: "是否开启选中管理员",
            backgroundDismiss: true,
            theme: 'modern',
            type: 'orange',
            icon: 'mdi mdi-help-circle-outline mdi-36px',
            buttons: {
                okay: {
                    text: "确认",
                    keys: ["enter"],
                    btnClass: 'btn-info',
                    action: function () {
                        $.ajax({
                            type: "post",
                            url: `{:url('admin/admin/editstates')}`,
                            data: {
                                action: 'start',
                                idArr,
                            },
                            dataType: "json",
                            success: function (res) {
                                if (res.code === 1) {
                                    $.notify({
                                        icon: 'mdi mdi-check',
                                        message: res.msg,
                                    }, {
                                        type: "success",
                                    });
                                    setTimeout(() => {
                                        location.reload();
                                    }, 1500);
                                } else {
                                    $.notify({
                                        icon: 'mdi mdi-window-close',
                                        message: res.msg,
                                    }, {
                                        type: "danger",
                                    });
                                }
                            },
                        });
                    },
                },
                cancel: {
                    text: "取消",
                    keys: ["ctrl", "shift"],
                    btnClass: 'btn-danger',
                },
            },
        });
    });

    $('.dels').on('click', function () {
        idArr = GetId();
        if (idArr.length === 0) {
            $.notify({
                icon: 'mdi mdi-alert',
                message: '请选择您想要操作的数据',
            }, {
                type: "info",
            });
            return false;
        }

        $.confirm({
            title: "提示",
            escapeKey: true,
            content: "是否注销选中管理员",
            backgroundDismiss: true,
            theme: 'modern',
            type: 'red',
            icon: 'mdi mdi-alert-outline mdi-36px',
            buttons: {
                okay: {
                    text: "确认",
                    keys: ["enter"],
                    btnClass: 'btn-info',
                    action: function () {
                        $.ajax({
                            type: "post",
                            url: `{:url('admin/admin/delete')}`,
                            data: {
                                action: 'dels',
                                idArr,
                            },
                            dataType: "json",
                            success: function (res) {
                                if (res.code === 1) {
                                    $.notify({
                                        icon: 'mdi mdi-check',
                                        message: res.msg,
                                    }, {
                                        type: "success",
                                    });
                                    setTimeout(() => {
                                        location.reload();
                                    }, 1500);
                                } else {
                                    $.notify({
                                        icon: 'mdi mdi-window-close',
                                        message: res.msg,
                                    }, {
                                        type: "danger",
                                    });
                                }
                            },
                        });
                    },
                },
                cancel: {
                    text: "取消",
                    keys: ["ctrl", "shift"],
                    btnClass: 'btn-danger',
                },
            },
        });
        // console.log(idArr);
    })
</script>